<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" href="css/head.css" />
		 <link rel="stylesheet" href="css/global.css" />
		 <script type="text/javascript" src="jquery-cookie-v1.4.1-0/jquery.cookie.js" ></script>
		 
	</head>
	<body>
				<!--顶部一栏-->
		<div id="topbar" class="container wbody">
			<ul class="ul1">
				<li>欢迎光临宝乐购商城！</li>
				<li><a href="login.html" target="_blank" id="login">请登录</a><span id="welcomeyou" style="color: deepskyblue;display: none; cursor: pointer;"></span></li>
				<li><a href="register.html" target="_blank" id="reg">免费注册</a><span id="exit" style="cursor: pointer; display: none;">[退出]</span></li>
				<li><a href="#"><i class="fa fa-weixin" style="color: #a3d928;"></i>微信登录</a></li>
				<li><a href="#"><i class="fa fa-weibo" style="color: #da251c;"></i>微博登录</a></li>
				<li><a href="#"><i class="fa fa-qq" style="color: #da251c;"></i>QQ登录</a></li>
				<li><select name="" style="color: white;background: #da251c;">
					<option value="">版本选择</option>
					<option value="">版本一</option>
					<option value="">版本二</option>
					<option value="">版本三</option>
				</select>
				</li>
			</ul>
			<ul class="ul2">
				<li class="tow_D_barcodes">
					<a><i class="fa fa-mobile"></i>手机商城</a>
					<ul>
						<li><img src="img/homepage_img/topbar/2-D_barcodes.png"/><br />安卓客户端下载</li> 
						<li><img src="img/homepage_img/topbar/2-D_barcodes.png"/><br />苹果客户端下载</li>
					</ul>
				</li>
				<li><a href="#">八网合一</a></li>
				<li><a href="#">充值</a>|</li>
				<li><a href="#">火车票</a>|</li>
				<li><a href="#">快速查询</a>|</li>
				<li><a href="#">演出票</a>|</li>
				<li><a href="#">旅游</a>|</li>
				<li><a href="#">电费</a>|</li>
				<li><a href="#">水费</a>|</li>
				<li><a href="#">机票</a></li>
			</ul>
		</div>
		<div class="clear"></div>
		<!--logo及搜索框等一栏-->
		<div id="logo_search"  class="container wbody">
			<div class="logo">
				<img src="img/homepage_img/logo/logo.png"/>
			</div>
			<div class="search">
				<p><i class="fa fa-search"></i><input type="text" name="txt" id="txt" value="" placeholder="请输入您喜欢的宝贝名"/><b class="b">搜索</b></p>
				&nbsp;&nbsp;热门搜索：<a href="#">女装</a><a href="#" class="next_page">男装</a><a href="#">运动鞋</a>
			</div>
			<div class="play">
				<div class="play_1"><b class="good">正</b><p>正品保证</p><span>GENUNE</span></div>
				<div><i class="fa fa-umbrella" style="color: #da251c;font-size: 40px;margin-top: 30px;"></i><p>安全保障</p><span>SECURITY</span></div>
				<div><b class="good">七</b><p>七天退换货</p><span>7DATESRETRUE</span></div>
				<div><b class="good">新</b><p>今日上新</p><span>NEWARRIVAL</span></div>
			</div>
			<div id="buycar">
				<i class="fa fa-shopping-cart" style="color: rgb(204,204,204);"></i>去购物车结算
			</div>
		</div>
		<div class="clear"></div>
		<!--导航栏-->
		<div id="nav" class="container wbody">
			<ul>
				<li class="fist">全部商品分类<i class="fa fa-list-ul"></i></li>
				<li><a href="homepage.html">首页</a></li>
				<li class="third"><a href="#">进口产品专区</a></li>
				<li><a href="#">分销</a></li>
				<li><a href="#">导航</a></li>
				<li><a href="#">门户</a></li>
				<li><a href="#">9块9包邮</a></li>
				<li><a href="#">购划算</a></li>
				<li><a href="#">便民服务</a></li>
				<li><a href="#">20封顶</a></li>
				<li><a href="#">视频</a></li>
				<li><a href="#">抽奖</a></li>
				<li class="last"><a href="#">签到</a></li>
			</ul>
		</div>
		<script type="text/javascript">
			var $play = $('.play');
		    var $div =$play.children("div")
			
		    var index = 0;
		    
		    // 承诺的数量数量
		    var len = $div.length;
		    // 设置定时器，3秒切换一张图片
		    var timer;;
		
		    // 鼠标移入清除定时器，鼠标移出重启定时器
		    $play.on('mouseenter',function(){
		        clearInterval(timer);
		    }).on('mouseleave',function(){
		        timer = setInterval(carousel,3000);
		    }).trigger('mouseleave')
		
		    // 轮播函数
		    function carousel(){
		        index++;
		        show();
		    }
		
		
		    // 显示承诺的函数
		    function show(){
		        // 处理index值，使其实现循环轮播
		        if(index<0){
		            index = len - 1;
		        }else if(index > len - 1){
		            index = 0;
		        }
		        //play名下的div挨个显示影藏
		        $div.eq(index).animate({opacity:1}).siblings().animate({opacity:0});
		        $div.eq(index).show().siblings().hide();

    		}
		    var status=$.cookie("登录状态");
		    var status_1=JSON.parse(status);
		    console.log(status_1);
		    if(status_1!=null){
		    	$("#welcomeyou").show();
		    	$("#welcomeyou").html(status_1);
		    	$("#login").hide();
		   		$("#reg").hide();
		    	$("#exit").show();
		    	//$("#exit").text(status_1)
		    }
		    $("#exit").click(function(){
		    	$.cookie("登录状态",null);
		    	$("#welcomeyou").hide();
		    	$("#login").show();
		    	$("#reg").show();
		    	$("#exit").hide();
		    	window.location.href="homepage.html";
		    })
		    //页面跳转
		    $("#welcomeyou").click(function(){
		    	window.location.href="personal_information.html";
		    })
		
		    $(".next_page").click(function(){
		    	window.location.href="next_page.html";
		    })
		    
    
		</script>
	</body>
</html>
